<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<LINK rel=stylesheet type=text/css href="../css/style.css">
<script type="text/javascript" src="../dist/jquery/jquery-1.8.3.js"></script>
<html>
<head>
    <title>列表</title>
</head>
<BODY>
<DIV id=header class=wrap>
    <DIV id=logo><IMG src="../images/logo.gif"></DIV></DIV>
<DIV id=navbar class=wrap>
    <DL class="search clearfix">
        <%-- <FORM id=sform method=post action=house!houseList.action>--%>
        <FORM id=sform>
            <DT>
                <UL>
                    <LI class=bold>房屋信息</LI>
                    <LI>标题：<INPUT class=text type=text name=htitle>
                        <LABEL class=ui-blue><INPUT  value=搜索房屋 type=button onclick="click2HouseList()" ></LABEL>
                    </LI></UL></DT>
            <DD>
                <UL>
                    <LI class=first>每页记录数</LI>
                    <LI><SELECT name=maxRows>
                        <OPTION selected value="-1">所有</OPTION>
                        <OPTION value="3">每页3条</OPTION>
                        <OPTION value=5>每页5条</OPTION>
                        <OPTION value=10>每页10条</OPTION>
                        <OPTION value=15>每页15条</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>价格 </LI>
                    <LI><SELECT name=hprice>
                        <OPTION selected value="0-0">不限</OPTION>
                        <OPTION value=0-500>500元以下</OPTION>
                        <OPTION value=500-800>500元—800元</OPTION>
                        <OPTION value=800-8000>800元以上</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>面积 </LI>
                    <LI><SELECT name=hfloorage>
                        <OPTION selected value="0-0">不限</OPTION>
                        <OPTION value=0-90>90以下</OPTION>
                        <OPTION value=90-110>90-110</OPTION>
                        <OPTION value=110-1100>110以上</OPTION>
                    </SELECT> </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>区位置</LI>
                    <LI><SELECT class=text name=street.district.did>
                        <%--<OPTION selected value=1004>海淀区</OPTION>--%>
                    </SELECT>
                    </LI></UL></DD>
            <DD>
                <UL>
                    <LI class=first>街道位置</LI>
                    <LI><SELECT id=street name=street.sid>
                        <%--<OPTION selected value="">不限</OPTION>
                        <OPTION value=1000>知春路</OPTION>
                        <OPTION value=1001>中关村大街</OPTION>
                        <OPTION value=1002>学院路</OPTION>
                        <OPTION value=1003>朝阳路</OPTION>--%>
                    </SELECT> </LI></UL></DD>

            <DD>
                <UL>
                    <LI class=first>房型</LI>
                    <LI><SELECT name=type.tid>
                        <%-- <OPTION selected value="">不限</OPTION>
                         <OPTION value=1000>一室一厅</OPTION>
                         <OPTION value=1001>一室两厅</OPTION>
                         <OPTION value=1002>两室一厅</OPTION>
                         <OPTION value=1003>两室两厅</OPTION>--%>
                    </SELECT>
                    </LI></UL></DD>

        </FORM></DL></DIV>
<DIV class="main wrap">
    <TABLE class=house-list>
        <TBODY>
        <%--<TR>
            <TD class=house-thumb><span><A href="details.htm" target="_blank"><img src="../images/thumb_house.gif" width="100" height="75" alt=""></a></span></TD>
            <TD>
                <DL>
                    <DT><A href="details.htm" target="_blank">尽快回家</A></DT>
                    <DD>海淀区中关村大街,346平米<BR>联系方式：3456 </DD></DL></TD>
            <TD class=house-type>一室一厅</TD>
            <TD class=house-price><SPAN>346.0</SPAN>元/月</TD></TR>--%>

        <TR>无租房信息</TR></TBODY></TABLE>
    <DIV class=pager>
        <UL>
            <LI><button name="firstPageNo" value="1" onclick="click2CurrPageNo('firstPageNo')">首页</button></LI>
            <LI><button name="prePageNo" value="6" onclick="click2CurrPageNo('prePageNo')">上一页</button></LI>
            <LI><button name="currPageNo" value="7" onclick="click2CurrPageNo('currPageNo')">当前页</button></LI>
            <LI><button name="nextPageNo" value="8" onclick="click2CurrPageNo('nextPageNo')">下一页</button></LI>
            <LI><button name="totalPages" value="10" onclick="click2CurrPageNo('totalPages')">末页</button></LI>
        </UL><SPAN
            class=total>1/2页</SPAN> </DIV></DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD></DL></DIV></BODY></HTML>



<script type="text/javascript">


    /*
    更新页码
    * */
    function updatePages(paginationInfo){
        $("button[name=first]").attr('value',1);
        $("button[name=prePageNo]").attr('value',paginationInfo.prePageNo);
        $("button[name=currPageNo]").attr('value',paginationInfo.currPageNo);
        $("button[name=nextPageNo]").attr('value',paginationInfo.nextPageNo);
        $("button[name=totalPages]").attr('value',paginationInfo.totalPages);
        $(".total").html(paginationInfo.currPageNo+'/'+paginationInfo.totalPages);
        $("button[name=currPageNo]").html('第 '+paginationInfo.currPageNo+' 页');
    }

    /*
    获取当前页数
    * */
    var getCurrPageNo=-1;
    var finalCurrPageNo=-1;
    function click2CurrPageNo(getCurrPageNo){
        console.log('777点击翻页按钮的点击事件');
        if ($("button[name="+getCurrPageNo+"]").val()>0){
            finalCurrPageNo=$("button[name="+getCurrPageNo+"]").val();
        }
        invokeAjax2houseList();
    }

    /*
    返回结果houseList
    * */
    function click2HouseList(){
        console.log('666点击搜索按钮button的点击事件');
        finalCurrPageNo=1;
        invokeAjax2houseList();
    }

    /*
    自定义异步查询模块组件,获取当前的结果JSON数据集
    * */

    function invokeAjax2houseList(){
        console.log('555调用了invokeAjax2houseList()函数');
        console.log('传入参数核查=======START==========');
        console.log('$("input[name=htitle]").val()========'+$("input[name=htitle]").val());
        console.log('$("select[name=hprice]").val()========'+$("select[name=hprice]").val());
        console.log('$("select[name=hfloorage]").val()========'+$("select[name=hfloorage]").val());
        console.log('$("select[name=street.district.did]").val()========'+$("select[name='street.district.did']").val());
        console.log('$("select[name=street.sid]").val()========'+$("select[name='street.sid']").val());
        console.log('$("select[name=type.tid]").val()========'+$("select[name='type.tid']").val());
        console.log('getCurrPageNo========'+finalCurrPageNo);
        console.log('$("select[name=maxRows]").val()========'+$("select[name=maxRows]").val());
        console.log('传入参数核查========END=========');
        $.ajax({
            type:'post',
            url:'house!houseList.action',
            data:{
                htitle:$("input[name=htitle]").val(),
                hprice_range:$("select[name=hprice]").val(),
                hfloorage_range:$("select[name=hfloorage]").val(),
                street_district_did:$("select[name='street.district.did']").val(),
                street_sid:$("select[name='street.sid']").val(),
                type_tid:$("select[name='type.tid']").val(),
                currPageNo:finalCurrPageNo,
                maxRows:$("select[name=maxRows]").val()
            },
            dataType:'json',
            success:function (data) {
                console.log('555555111111');
                console.log(data);
                console.log(data.houseList);
                console.log(data.pagination);

                var data1=data.houseList;
                //更新页码
                updatePages(data.pagination);

                var str4='';
                $.each(data1,function (index,obj) {
                    str4+="<tr>";
                    str4+="<TD class=house-thumb>";
                    str4+="<span>";
                    str4+="<a href='details.htm' target='_blank'>";
                    str4+="<img src='../images/thumb_house.gif' width='100' height='75' alt='图片加载失败'>";
                    str4+="</a>";
                    str4+="</span>";
                    str4+="</TD>";
                    str4+="<TD>";
                    str4+="<DL>";
                    str4+="<DT>";
                    /*str4+="<A href='details.jsp' target='_blank'>序号: "+obj.hid+'==='+obj.htitle+"</A>";*/
                    str4+="<A href='house!searchHouse.action?hid="+obj.hid+"' target='_blank'>序号: "+obj.hid+'==='+obj.htitle+"</A>";
                    str4+="</DT>";
                    str4+="<DD>"+obj.street.district.dname+obj.street.sname+","+obj.hfloorage+"平米<BR>联系方式："+obj.hcontact +"</DD>";
                    str4+="</DL>";
                    str4+="</TD>";
                    str4+="<TD class=house-type>"+obj.type.tname+"</TD>";
                    str4+="<TD class=house-price><SPAN>"+obj.hprice+"</SPAN>元/月</TD>";
                    str4+="</tr>";
                });
                $("tbody").empty();
                $("tbody").append(str4);
            }
        });
    }

    /**
     * 房屋类型的下拉列表
     */
    selectType();
    function selectType(){
        console.log('111房屋类型的下拉列表');
        $.ajax({
            type:'post',
            url:'type!typeList.action',
            dataType:'json',
            success:function (data) {
                var str1='<option value=0>房屋类型不限</option>';
                $.each(data,function (index,obj) {
                    str1+='<option value='+obj.tid+'>'+obj.tname+obj.tid+'</option>';
                });
                $("select[name='type.tid']").empty();
                $("select[name='type.tid']").append(str1);
                /* console.log($("select[name='type.tid']").html());*/
            }
        });
    }
    /**
     * 区县的下拉列表
     */
    selectDistrict();
    function  selectDistrict() {
        console.log('222区县的下拉列表');
        $.ajax({
            type:'post',
            url:'district!districtList.action',
            dataType:'json',
            success:function (data) {
                var str2='<option value=0>区县不限</option>';
                $.each(data,function (index,obj) {
                    str2+='<option value='+obj.did+'>'+obj.dname+obj.did+'</option>';
                });
                $("select[name='street.district.did']").empty();
                $("select[name='street.district.did']").append(str2);
                /* console.log($("select[name='street.district.did']").html());*/
            }
        });
    }
    /**
     * 街道的下拉列表
     */
    var did2str=-1;
    selectStreet();
    function selectStreet(){
        console.log('333街道的下拉列表');
        console.log('333====='+did2str);
        $.ajax({
            type:'post',
            url:'street!streetList.action',
            data:{
                sid:did2str/*实际是did,无法直接使用did的模型驱动*/
            },
            dataType:'json',
            success:function (data) {
                var str3='<option value=0>街道不限</option>';
                $.each(data,function (index,obj) {
                    str3+='<option value='+obj.sid+'>'+obj.sname+obj.sid+'|||'+obj.district.dname+obj.district.did+'</option>';
                    /*str3+='<option value='+obj.sid+'>'+obj.sname+'</option>';*/
                });
                $("select[name='street.sid']").empty();
                $("select[name='street.sid']").append(str3);
                /* console.log($("select[name='street.sid']").html());*/
            }
        });
    }
    /*
        select-option的属性selected=selected
    * */
    $(function () {
        console.log('444区县和街道的下拉列表的级联');
        $("select[name='street.district.did']").live('click',function () {
            console.log('444111');
            var did2val=$("select[name='street.district.did']").val();
            $("select[name='street.district.did'] option[value!="+did2val+"]").removeAttr('selected');
            $("select[name='street.district.did'] option[value="+did2val+"]").attr('selected','selected');
            did2str=$("select[name='street.district.did'] option[selected=selected]").val();
            selectStreet();
        });
    });

</script>

